.container {
  width: 100%;
  height: 80vh;
  overflow: hidden;
  position: relative;
}

.inner {
  animation-name: gallary;
  animation-duration: 18s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  -webkit-animation-name: gallary;
  -webkit-animation-duration: 18s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;

  display: flex;
  background: #f0f0f0;
  position: absolute;
}

.item {
  width: calc(80vh * 2.511);
  height: 80vh;
}

@keyframes gallary {
  from {
    left: calc(-80vh * 2.511 * 2);
  }
  to {
    left: 0;
  }
}

@-webkit-keyframes gallary /* Safari and Chrome */ {
  from {
    left: calc(-80vh * 2.511 * 2);
  }
  to {
    left: 0;
  }
}
